<script setup lang="ts">
import { ref, reactive } from 'vue'
import { LokiLogViewer } from '../components/LokiLogViewer'

// 引用LokiLogViewer组件实例
const logViewer = ref(null)

// 自定义终端配置
const terminalOptions = {
  fontSize: 12,
  lineHeight: 1.2,
  scrollback: 5000,
  theme: {
    background: '#1e1e1e',
    foreground: '#f8f8f8'
  }
}

// 预设的命名空间和Pod（实际应用中可能来自路由参数或状态管理）
const logParams = reactive({
  namespace: 'monitoring',
  pod: 'prometheus-server-0'
})

// 事件处理函数
const handleLogsLoaded = (logs) => {
  console.log(`加载了 ${logs.length} 条日志记录`)
}

const handleError = (error) => {
  console.error('日志查询出错:', error)
}

const handleLiveModeChange = (isLive) => {
  console.log(`实时模式已${isLive ? '启用' : '禁用'}`)
}
</script>

<template>
  <div class="log-dashboard">
    <div class="dashboard-header">
      <h1>Loki日志控制台</h1>
      <div class="dashboard-controls">
        <span class="param-label">当前命名空间:</span>
        <el-tag type="success">{{ logParams.namespace }}</el-tag>
        <span class="param-label">当前Pod:</span>
        <el-tag type="warning">{{ logParams.pod }}</el-tag>
      </div>
    </div>
    
    <!-- 使用封装好的LokiLogViewer组件 -->
    <LokiLogViewer
      ref="logViewer"
      title="Loki日志查询工具"
      :namespace="logParams.namespace"
      :pod="logParams.pod"
      :terminalOptions="terminalOptions"
      :autoRefreshInterval="5000"
      :defaultTimeRange="60"
      @logs-loaded="handleLogsLoaded"
      @error="handleError"
      @live-mode-change="handleLiveModeChange"
    />
  </div>
</template>

<style scoped>
.log-dashboard {
  padding: 20px;
  height: calc(100vh - 60px); /* 减去导航栏高度 */
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
}

.dashboard-header {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 15px;
  border-bottom: 1px solid #dcdfe6;
}

.dashboard-controls {
  display: flex;
  align-items: center;
  gap: 15px;
}

.param-label {
  margin-left: 10px;
  color: #606266;
}
</style>